/**
* 左边菜单
*/
<template>
<div id="leftnav">
  <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#2F4050" text-color="rgba(255,255,255,0.75)" active-text-color="#fff" unique-opened="true">
<!--
     <el-submenu :key="10" :index="allmenu[0].url">
      <template slot="title">
        <img class="icon" :src="allmenu[0].icon" alt="">
        <span>{{allmenu[0].menuname}}</span>
      </template>
    </el-submenu> -->

    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.url">
      <template slot="title">
        <!-- <i class="iconfont" :class="menu.icon"></i> -->
        <img class="icon" :src="menu.icon" alt="">
        <span>{{menu.menuname}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="chmenu.url" :key="chmenu.menuid">
          <i class="iconfont" :class="chmenu.icon"></i>
          <span>{{chmenu.menuname}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</div>
</template>
<script>
// import { menu } from '../api/userMG'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: [
        {
          menuid: 10,
          icon: require('../assets/img/menu/icon10.png'),
          menuname: '首页',
          url: '/login'
        },{
          menuid: 20,
          icon: require('../assets/img/menu/icon20.png'),
          menuname: '企业认证',
          url: '/home',
          menus: [
            {
              menuid: 21,
              icon: require('../assets/img/menu/icon20.png'),
              menuname: '企业认证',
              url: '/home',
            }]
        },{
          menuid: 30,
          icon: require('../assets/img/menu/icon30.png'),
          menuname: '运输管理',
          url: '',
          menus: [
            {
              menuid: 11,
              icon: 'icon-cat-skuQuery',
              menuname: '订单管理',
              url: ''
            },{
              menuid: 11,
              icon: 'icon-cat-skuQuery',
              menuname: '运单管理',
              url: ''
            },{
              menuid: 11,
              icon: 'icon-cat-skuQuery',
              menuname: '订单台账',
              url: ''
            },{
              menuid: 11,
              icon: 'icon-cat-skuQuery',
              menuname: '运单台账',
              url: ''
            }
          ]
        },{
          menuid: 40,
          icon: require('../assets/img/menu/icon40.png'),
          menuname: '财务管理',
          url: ''
        },{
          menuid: 50,
          icon: require('../assets/img/menu/icon50.png'),
          menuname: '车辆管理',
          url: ''
        },{
          menuid: 60,
          icon: require('../assets/img/menu/icon60.png'),
          menuname: '司机管理',
          url: ''
        },{
          menuid: 70,
          icon: require('../assets/img/menu/icon70.png'),
          menuname: '评价管理',
          url: ''
        },{
          menuid: 80,
          icon: require('../assets/img/menu/icon80.png'),
          menuname: '系统管理',
          url: ''
        },
      ]
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    console.log(this.$route.path);

  }
}
</script>
<style lang='scss'>
#leftnav{
  height: 100%;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 300px;
    // min-height: 400px;
    height: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
  .el-menu-item-group__title {
    padding: 0px;
  }
  .el-submenu__title {
    padding: 0 40px !important;
    .icon {
      width: 22px;
    }
    span {
      margin-left: 40px;
    }
  }
  .el-menu-item-group>ul>li {
    padding-left: 110px !important;
  }
}

</style>